const path = require('path');

//启动热更新的第二 步 , 导入你安装的webpack
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
//引入插件
// 作用：1、使用插件之后 ，不需要手动链接bundle.js文件
// 2、使用插件之后，自动引用内存中的HTML页面
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { // entry  入口 output 输出
    entry: path.join(__dirname,'./src/main.js'),//需要打包的文件入口
    output: {
        path: path.join(__dirname,'./dist'),//打包之后输出到文件夹
        filename: 'bundle.js'//打包好之后生成的文件名
    },
    devServer:{
        open:"chrome",
        // port: 7865,
        contentBase: 'src',
        hot:true,//热更新 只需要更新用户更改过的内容
    },
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//启动热更新的第三部 new热更新模块
        new htmlWebpackPlugin({
            template :path.join(__dirname,'./src/index.html'),//需要创建的HTML模板路径
            filename:'index.html',//在内存中创建的HTML页面
        }),
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},//use 中加载器执行顺序 ， 右往左执行，先执行css-loader 在执行style-loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            // limit 限制 ，限定 -- 用于指定图片的大小，[name]表示获取图片的名称 ， [ext] 获取背景图片的后缀名 ，[hash:5]表示设置5位哈希编码
            {test:/\.(jpg|png|gif|jpeg|bmp)/,use:'url-loader?esModule=false&limit=107177&name=[hash:5]-[name].[ext]'},
            {test:/\.(ttf|svg|dot|woff|woff2|font|ttc|eot)$/,use:'url-loader'},
            {test:/\.js/,use:'babel-loader',exclude:/node_modules/},//exclude:/node_modules/ -- 表示排除node_modules文件夹中.js 文件
            {test:/\.vue$/,use:'vue-loader'},
        ]
    },
    resolve:{
        alias:{//修改Vue 导入的文件
            // "vue$":"vue/dist/vue.js"
        }
    }
}